<template>
  <el-form :model="accessForm" :rules="rules" ref="accessForm">
    <el-form-item label="服务项目" prop="name">
      <el-input
        v-model="accessForm.name"
        placeholder="请输入"
        maxlength="20"
        :disabled="detailShow"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="销售价" prop="price">
      <el-input-number
        v-model="accessForm.price"
        placeholder="请输入"
        :controls="false"
        :precision="2"
        :min="0.01"
        :disabled="detailShow"
      >
      </el-input-number>
    </el-form-item>
    <el-form-item label="说明" prop="description">
      <el-input
        type="textarea"
        :rows="4"
        v-model="accessForm.description"
        placeholder="请输入"
        size="mini"
        maxlength="200"
        show-word-limit
        :disabled="detailShow"
      >
      </el-input>
    </el-form-item>
    <el-form-item label="相关文件">
      <el-upload
        class="upLoad"
        :show-file-list="false"
        accept=".jpg, .jpeg, .png, .gif, .bmp, .psd, .tif, .jfif, .mkv, .mp4, .avi, .swf, .wmv, .rmvb, .mov, .mpg, .mp3, .flac, .ape, .wma, .wav, .aac, .m4a, .au, .ram, .mmf, .aif, .txt, .pdf, .doc, .docx, .xls, .xlsx, .cvs, .xml, .ppt, .pptx, .wps, .htm, .html, .rtf, .hlp"
        action=""
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :onProgress="onFileProgress"
        :before-upload="beforeUpload"
        :http-request="uploadRequest"
      >
        <el-button v-if="!detailShow">添加</el-button>
      </el-upload>
      <div style="margin-top: 20px">
        <div class="attachsItem" v-for="(item, index) in attach" :key="index">
          <a :href="item.url" target="_blank" download>{{ item.name }}</a>
          <span
            v-if="!detailShow"
            class="attachDel"
            @click="attachDelFun(item, index)"
            >x</span
          >
        </div>
      </div>
      <el-progress
        v-if="isShowProgress"
        :text-inside="true"
        :stroke-width="24"
        :percentage="progress"
        status="success"
      ></el-progress>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { uploadQiniu } from '@/utils/upload'
interface AccessForm {
  name: string
  price: any
  description: string
  id?: any
}
@Component({
  name: 'addServiceInfo'
})
export default class SparePartsAddOrEdit extends Vue {
  @Prop() private detailShow

  private $message: any

  private fileName = '' // 本地文件名称

  private progress: any = 0 // 上传进度

  public attach: any = [] // 附件

  private isShowProgress: boolean = false // 是否显示上传文件进度条

  private rules: object = { // 信息校验
    name: [{ required: true, message: '请输入服务项目', trigger: 'blur' }],
    price: [{ required: true, message: '请输入销售价', trigger: 'blur' }]
  }

  public accessForm: AccessForm = {
    name: '',
    price: undefined,
    description: ''
  }

  private uploadRequest (request: any) { // 七牛上传
    uploadQiniu({ type: 'common', fileName: this.fileName }, request)
  }

  private uploadSuccess (data: any) { // 上传成功
    this.attach.push({ url: data.key ? `${data.domain}/${data.key}` : '', name: this.fileName })
    this.isShowProgress = false
    this.progress = 0
  }

  private uploadError () { // 上传失败
    this.$message({ message: '文件上传失败，请重新选择文件上传', type: 'error' })
  }

  private onFileProgress (data: any) {
    this.progress = Math.ceil(data.percent)
  }

  private beforeUpload (file: any) { // 上传前验证文件合法性
    if (this.attach.length > 9) {
      this.$message({ message: '最多只允许上传10个附件', type: 'error' })
      return false
    }
    this.fileName = file.name.replace(/\s/g, '')
    if (file.size / 1024 / 1024 > 20) {
      this.$message({ message: '附件大小不能超过20M', type: 'error' })
      return false
    } else {
      this.isShowProgress = true
    }
  }

  private attachDelFun (item: any, index: number) {
    this.attach.splice(index, 1)
  }
}
</script>
<style lang="stylus" scoped>
.el-input-number
  width 100%
  >>> .el-input__inner
    text-align left
.attachsItem
  padding 8px 9px
  background #F1F8FD
  border-radius 4px
  color #008BEE
  display inline-block
  margin 0px 10px 10px 0px
  line-height 20px
  .attachDel
    margin-left 10px
    cursor pointer
</style>
